1022959: Updated Environment Integration for ssr ionic nx vite Environments by SF4524LogeshKumar · Pull Request #2669 · syncfusion-content/document-processing-docs

SF4524LogeshKumar · 2026-04-22T13:12:17Z

Description:

Updated Environment Integration for Syncfusion Angular PDF Viewer

Ionic Angular
Angular Vite
Angular Universal SSR
NX Angular

…nments

SyncfusionBuild · 2026-04-22T13:13:13Z

Build Status: INPROGRESS 🔃
Build Location: 1022959-ionicAngular

SyncfusionBuild · 2026-04-22T13:26:32Z

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 1022959-ionicAngular
Technical Error(s): 0
Spelling Error(s): 21
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 6
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2026-04-22T14:01:47Z

Build Status: INQUEUE 🕒
Build Location: 1022959-ionicAngular

SyncfusionBuild · 2026-04-22T14:02:58Z

The running CI Job is terminated due to changes committed on the source branch for this Merge Request and CI triggered for latest commit.

SyncfusionBuild · 2026-04-22T14:03:26Z

CI Status: ABORTED ❌
Source Compilation: Not Started ❌
Build Location: 1022959-ionicAngular

SyncfusionBuild · 2026-04-22T14:03:51Z

Build Status: INQUEUE 🕒
Build Location: 1022959-ionicAngular

SyncfusionBuild · 2026-04-22T14:05:30Z

Build Status: INPROGRESS 🔃
Build Location: 1022959-ionicAngular

SyncfusionBuild · 2026-04-22T14:16:47Z

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 1022959-ionicAngular
Technical Error(s): 0
Spelling Error(s): 18
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 1
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2026-04-22T14:24:42Z

Build Status: INPROGRESS 🔃
Build Location: 1022959-ionicAngular

SyncfusionBuild · 2026-04-22T14:36:21Z

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 1022959-ionicAngular
Technical Error(s): 0
Spelling Error(s): 17
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2026-04-28T08:08:55Z

Build Status: INPROGRESS 🔃
Build Location: 1022959-ionicAngular

SyncfusionBuild · 2026-04-28T09:53:57Z

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 1022959-ionicAngular
Technical Error(s): 0
Spelling Error(s): 17
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

KameshRajendran · 2026-04-29T07:02:13Z

+import { Component, PLATFORM_ID, Inject, OnInit, NO_ERRORS_SCHEMA } from '@angular/core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { 
+  PdfViewerModule, 


Can we make it three lines

KameshRajendran · 2026-04-29T07:02:32Z

+  styles: [`
+    .pdf-viewer-container {
+      padding: 20px;
+      background: #f5f5f5;
+      border-radius: 8px;
+      margin-top: 20px;
+    }
+
+    .viewer-wrapper {
+      height: 650px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      background: white;
+      overflow: hidden;
+    }
+
+    .ssr-placeholder {
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: white;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      color: #999;


Do we need these style related code.

KameshRajendran · 2026-04-29T07:09:12Z

+}
+
+.no-documents {
+  display: flex;


why these much CSS code?

KameshRajendran · 2026-04-29T07:17:23Z

+
+This guide explains how to create an Angular application powered by the Vite build system and integrate the Syncfusion Angular PDF Viewer using standalone components.
+
+From Angular 17 onwards, the Angular CLI uses a Vite-based application builder by default for local development. This improves startup time, rebuild performance, and developer experience. The Syncfusion Angular PDF Viewer works seamlessly with this modern setup when integrated correctly.


we can remove this content.

KameshRajendran · 2026-04-29T07:17:37Z

+Verify installations:
+
+```bash
+node --version
+npm --version
+ng version


Remove verification commands

KameshRajendran · 2026-04-29T07:28:14Z

+
+These imports ensure the PDF Viewer toolbar, buttons, menus, and all UI elements are properly styled using Syncfusion's Material Design theme.
+
+## Create a PDF Service


This is application architecture, not PDF Viewer integration

remove this section

KameshRajendran · 2026-04-29T07:28:38Z

+**Component Features:**
+- Standalone component (no NgModule required)
+- All 13 Syncfusion services registered as providers
+- Dynamic resource URL calculation for runtime asset resolution
+- RxJS subscriptions to service observables
+- Proper event handling for load success/failure
+- TypeScript strict mode compatible


Remove feature bullets

KameshRajendran · 2026-04-29T07:29:18Z

+{% endhighlight %}
+{% endtabs %}
+
+## Add Sample PDF Documents (Optional)


Remove this section

KameshRajendran · 2026-04-29T07:30:51Z

+
+# Syncfusion Angular PDF Viewer in Angular Universal (SSR)
+
+This guide shows how to create an Angular Universal SSR application and integrate the Syncfusion Angular PDF Viewer component.


Replace conceptually with:

“This guide explains how to integrate the Syncfusion Angular PDF Viewer into an existing Angular Universal (SSR) application.”

KameshRajendran · 2026-04-29T07:31:17Z

+
+## Step 1: Create Angular SSR Project
+
+Create a new Angular application with Server-Side Rendering:


Angular Universal setup belongs to Angular docs

1022959: Updated Environment Integration for ssr ionic nx vite Enviro…

6e83cac

…nments

1022959: Resolved CI failures

922b02c

1022959: Resolved CI failures

7704d45

1022959: Updated and resolved CI failures

e246d00

Merge branch 'development' into 1022959-ionicAngular

594595f

KameshRajendran requested changes Apr 29, 2026

View reviewed changes


		This guide explains how to create an Angular application powered by the Vite build system and integrate the Syncfusion Angular PDF Viewer using standalone components.

		From Angular 17 onwards, the Angular CLI uses a Vite-based application builder by default for local development. This improves startup time, rebuild performance, and developer experience. The Syncfusion Angular PDF Viewer works seamlessly with this modern setup when integrated correctly.


		These imports ensure the PDF Viewer toolbar, buttons, menus, and all UI elements are properly styled using Syncfusion's Material Design theme.

		## Create a PDF Service


		# Syncfusion Angular PDF Viewer in Angular Universal (SSR)

		This guide shows how to create an Angular Universal SSR application and integrate the Syncfusion Angular PDF Viewer component.


		## Step 1: Create Angular SSR Project

		Create a new Angular application with Server-Side Rendering:

Conversation

SF4524LogeshKumar commented Apr 22, 2026

Description:

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 22, 2026

Uh oh!

SyncfusionBuild commented Apr 28, 2026

Uh oh!

SyncfusionBuild commented Apr 28, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants